//获取商品列表页左侧的导航条
let list_nav = document.querySelector('.p-list');

window.onload = product_list('all');
//进行委托事件
list_nav.onclick = function (e) {
    //当点击a标签时才有事件
    if (e.target.nodeName === 'A') {
        //获取到选中的a标签，去除选中样式
        let a_active = document.querySelector('.big-list a.active');
        a_active.classList.remove('active');

        //为当前选中的a标签添加选中样式
        e.target.classList.add('active');
        // console.log(e.target.dataset.fid)
        //获取左侧导航标题
        let title = document.getElementById('title');
        //将点击的内容覆盖标题的内容
        title.innerHTML = e.target.innerHTML;

        //如果点击的为一级分类的a标签
        if (e.target.dataset.fid) {
            //那就拿到一级分类的id，访问数据库，拿到一级分类的商品
            let fCid = e.target.dataset.fid;
            product_list(fCid);
        } else {
            //否则拿到二级分类的id，访问数据库，拿到二级分类的商品
            let sCid = e.target.dataset.cid;
            ajax({
                url: '/pro/slist',
                type: 'get',
                data: sCid,
                success: function (data) {
                    data = JSON.parse(data);
                    // console.log(data);
                    let str = '';//先定义一个空字符
                    //循环获取每个商品的样式
                    for (let i = 0; i < data.length; i++) {
                        let item = template('product-list', data[i]);
                        //用模板引擎渲染后拿到当个元素块，再拼接在一起
                        str += item;
                    }
                    //再将字符串替换商品列表中的内容
                    document.querySelector('.p-product-f').innerHTML = str;
                },
                error: function (e) {
                    console.log(e);
                }
            });
        }
    }
}

//查找一级商品
function product_list(key) {
    ajax({
        url: '/pro/flist',
        type: 'get',
        data: key,
        success: function (data) {
            data = JSON.parse(data);
            // console.log(data);
            let str = '';
            for (let i = 0; i < data.length; i++) {
                let item = template('product-list', data[i]);
                str += item;
            }
            document.querySelector('.p-product-f').innerHTML = str;
        },
        error: function (e) {
            console.log(e);
        }
    });
}